<template>
	<view>
		<view class="container" @click="handleTap" style="po">
			<image v-if="showHeart" src="/static/探索图标/红爱心.png" class="heart-animation" />
		</view>


		<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
			<view class="" style="display: flex; justify-content: space-around;width: 230rpx;margin-left: 20rpx;">
				<image :src="item.user.avatar" style="width: 45rpx; height: 45rpx;border-radius: 50%; " mode=""></image>
				<text>{{item.user.name}}</text>
			</view>
			<view class="" style="display: flex; justify-content: space-between;height: 60rpx; width: 250rpx; ">
				<button @click="flag=true" v-if="flag==false"
					style="background-color: #f9a51f;color: #fff; width: 180rpx;height: 60rpx;line-height: 60rpx; margin-right: 20rpx;">关注</button>
				<button @click="flag=false" v-else
					style="background-color: #eee;color: #eoo; width: 180rpx;height: 60rpx;line-height: 60rpx;  margin-right: 20rpx;">已关注</button>
				<image @click="zhuanfa" src="../../static/探索详情/转发.png"
					style="width: 45rpx; height: 45rpx;margin-right: 20rpx;" mode="">
				</image>
			</view>
		</view>

		<view class="" style="margin-top: 20rpx;">
			<swiper indicator-active-color="#fff" style="width: 100%; height: 60vh;"  indicator-dots
				:indicator-dots="true" :interval="3000" :duration="100">
				<swiper-item v-for="i in item.image">
					<view class="swiper-item">
						<image @longpress="saveImage(i)" style="width: 100%; height: 60vh;" :src="i" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="xq_content" style="padding: 0rpx 40rpx;">
			<view class="" style="height: 70rpx;line-height: 70rpx;">
				<text user-select style="margin-bottom: 30rpx;font-size: 32rpx;font-weight: 600;">{{item.title}}</text>
			</view>
			<view class="">
				<text user-select style="width: 100%;white-space: pre-wrap;">
					{{item.content}}
				</text>
			</view>

			<view style="height: 100rpx;line-height: 100rpx;" class="">
				今天 {{item.time}} {{item.addressObj.name}}
				<text style="color: #010204;text-decoration: underline;" @click="show1 = true">查看详细地址</text>
			</view>

			<up-popup :show="show1" mode="top" @close="close1" @open="open1">
				<view style="height: 40vh;">
					<view>
						<up-notice-bar :text="text1"></up-notice-bar>
					</view>
					 <text :user-select="true">位置名称:{{item.addressObj.name}}</text> 
					 <br />
					 <text :user-select="true">详细地址:{{item.addressObj.address}}</text> 
					 <br />
					 <text>复制文本 => 点击我的 => 门店地址 => 粘贴文本</text>
				</view>
			</up-popup>
			
			<view v-if="item.videolist.length>0" @click="this.show=true"
				style="margin-bottom: 30rpx;" class="">
				点击观看视频
			</view>

			<view style="height: 100rpx;line-height: 100rpx;border-top: 1px #eee solid;" class="">
				共有{{length}}条评论
			</view>

			<!-- 视频模态框 -->
			<view v-if="item.videolist.length>0" class="">
				<up-overlay :show="show">
					<view class="warp">
						<button @click="this.show=false"
							style="background-color: rgba(127, 127, 127,0.2);border: 0rpx;position: absolute;top: 30rpx;left: 30rpx;">✘</button>
						<video :src="item.videolist[0]" :controls="true"></video>
					</view>
				</up-overlay>

			</view>

			<view class="" style="display: flex; height: 60rpx;position: relative;">
				<image style="width: 60rpx;height: 60rpx;border-radius: 50%;margin: 10rpx 20rpx 20rpx 0rpx;"
					:src="item.user.avatar" mode=""></image>
				<input
					style="padding:20rpx;background-color:rgba(196, 198, 201,0.3);height: 40rpx; width: 650rpx; border-radius: 50rpx;"
					placeholder="有话要说,快来评论" type="text" />
				<view class="" style="display: flex;position:absolute;top: 25rpx;right: 30rpx;z-index: 100;">
					<image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;" src="../../static/探索详情/@.png"
						mode=""></image>
					<image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;" src="../../static/探索详情/表情.png"
						mode=""></image>
					<image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;" src="../../static/探索详情/照片.png"
						mode=""></image>
				</view>
			</view>

			<view class="">
				<dl v-for="i in item.data" :key="i._id" style="display: flex;width: 100vw;margin-top: 65rpx;">
					<dt>
						<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" :src="i.img" mode=""></image>
					</dt>
					<dd>
						<view style="display: flex;justify-content: space-between;width: 73vw" class="">
							<p style="color: #878987;">{{i.name}}</p>
							<image style="width: 30rpx;height: 30rpx;" src="../../static/探索图标/白爱心.png" mode=""></image>
						</view>
						<p style="margin-top: 20rpx;">{{i.content}} <text
								style="font-size: 25rpx; color: #878987;margin: 0rpx 20rpx;">2小时前 杭州</text>
							<text @click="huifu">回复</text>
						</p>
					</dd>
				</dl>
			</view>

			<view style="width: 100vw;display: flex;justify-content: space-between;;position: absolute;bottom: 0rpx;"
				class="">
				<input type="text"
					style="border-radius: 50rpx;background-color:rgba(196, 198, 201,0.3);height: 40rpx; width: 50%;padding: 20rpx;"
					placeholder="有话要说,快来评论" />
				<view style="width: 40%;margin-top: 20rpx;margin-right: 40rpx;" class="">
					<image v-if="item.like.ifLike == false" @click="uplike"
						style="width: 30rpx;height: 30rpx;padding-left: 20rpx;" src="../../static/探索图标/白爱心.png" mode="">
					</image>
					<image v-if="item.like.ifLike == true" @click="uplike"
						style="width: 30rpx;height: 30rpx;padding-left: 30rpx;" src="../../static/探索图标/红爱心.png" mode="">
					</image>
					<text style="margin-left: 10rpx;">{{item.like.likes}}</text>
					<image style="width: 30rpx;height: 30rpx;padding-left: 20rpx;" src="../../static/探索详情/白五角星.png"
						mode=""></image>
					<text style="margin-left: 10rpx;">0</text>
					<image style="width: 30rpx;height: 30rpx;padding-left: 20rpx;" src="../../static/探索详情/评论.png"
						mode=""></image>
					<text style="margin-left: 10rpx;">0</text>
				</view>
			</view>
		</view>


	</view>
</template>
<script>
	import request from "../../components/promise/promise.js"
	export default {
		data() {
			return {
				text1: "温馨提示：长按可以复制文本到门店地址上搜索具体位置哦~~~",
				show1: false,
				show: false,
				flag: false,
				item: {
					user: {
						avatar: "",
						name: ""
					},
					addressObj: {
						name: "",
						address: "",
					},
					videolist: [],
					like: {
						ifLike: "",
						likes: ""
					}
				},
				length: "",
				tapCount: 0,
				tapTimer: null,
				isDoubleTap: false,
				showHeart: false
			}
		},
		onLoad(options) {
			let item = JSON.parse(decodeURIComponent(options.item))
			this.item = item
			this.length = this.item.data.length
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
				success: (res) => {
					console.log('res', res);
				},
				fail: (err) => {
					console.log('err', err);
				}
			});

		},
		methods: {
			 async saveImage(e) {  
			       const imgUrl = e;  
			       try {  
			         // 假设这里你有一个后端API来生成图片的下载链接（如果需要的话）  
			         // 但在这里我们直接使用图片的URL  
			           
			         // 下载图片到本地临时文件  
			         const resDownload = await wx.downloadFile({  
			           url: imgUrl,  
			           success(res) {  
			             if (res.statusCode === 200) {  
			               // 保存图片到相册  
			               wx.saveImageToPhotosAlbum({  
			                 filePath: res.tempFilePath,  
			                 success(res) {  
			                   wx.showToast({  
			                     title: '保存成功',  
			                     icon: 'success',  
			                     duration: 2000  
			                   });  
			                 },  
			                 fail(err) {  
			                   if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {  
			                     wx.showModal({  
			                       title: '保存失败',  
			                       content: '请授权访问相册',  
			                       success(res) {  
			                         if (res.confirm) {  
			                           wx.openSetting({  
			                             success(res) {  
			                               if (res.authSetting['scope.writePhotosAlbum']) {  
			                                 // 用户重新授权后，可以再次调用保存图片接口 saveImageToPhotosAlbum  
			                               }  
			                             }  
			                           });  
			                         }  
			                       }  
			                     });  
			                   }  
			                 }  
			               });  
			             }  
			           }  
			         });  
			       } catch (err) {  
			         console.error('Error downloading image:', err);  
			       }  
			     },  
			open1() {
				0
				this.show1 = true;
			},
			close1() {
				this.show1 = false;
			},
			huifu() {
				uni.showToast({
					title: "功能暂未开发",
					icon: "none"
				})
			},
			onShareAppMessage() {
				return {
					title: '自定义分享标题',
					path: '/pages/tanXQ/tanXQ',
					success: function(res) {
						// 转发成功  
					},
					fail: function(err) {
						// 转发失败  
					}
				}
			},
			onShareTimeline() {
				return {
					title: '自定义分享到朋友圈的标题',
					imageUrl: '/path/to/your/image.png', // 分享到朋友圈的图片路径  
					success: function(res) {
						// 用户点击了分享后执行的回调函数  
						console.log(res)
					}
				}
			},
			async uplike() {
				console.log(this.item.like)
				let {
					data: {
						code
					}
				} = await request({
					url: "http://localhost:3000/uplike",
					method: "POST",
					data: {
						_id: this.item._id,
						ifLike: !this.item.like.ifLike,
						likes: this.item.like.likes
					}
				})
				if (code == 200) {
					console.log("修改成功")
				}
			},
			handleTap() {
				this.tapCount++;
				if (this.tapCount === 1) {
					// 第一次点击，设置计时器  
					this.tapTimer = setTimeout(() => {
						this.tapCount = 0; // 重置点击次数  
						this.isDoubleTap = false; // 重置双击状态  
					}, 200); // 设定双击的时间间隔，比如200毫秒  
				} else if (this.tapCount === 2) {
					// 如果在短时间内发生了第二次点击，则认为是双击  
					clearTimeout(this.tapTimer); // 清除计时器  
					this.isDoubleTap = true; // 设置双击状态为true  
					this.tapCount = 0; // 重置点击次数  
					this.showHeart = true; // 显示小心心  
					// 你可以在这里添加发送点赞请求的代码  

					// 小心心显示一段时间后隐藏  
					setTimeout(() => {
						this.showHeart = false;
					}, 1000); // 设定小心心显示的持续时间，比如1秒  
				}
			},
			zhuanfa() {
				uni.showToast({
					title: '点击上方三个点进行转发',
					icon: "none"
				});
			}
		}
	}
</script>

<style>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}


	.xq_content {
		position: relative;
		border-radius: 20rpx !important;
		z-index: 1000;
		background-color: #fff;
		height: 100vh;
	}

	.container {
		/* 设置你的容器样式 */
		width: 100%;
		height: 40vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 100rpx;
		z-index: 1000;
	}

	.heart {
		/* 设置你的爱心图片样式 */
		width: 100rpx;
		height: 100rpx;
	}

	.doubleTap {
		/* 这里可以添加双击时的样式变化，比如放大、变色等 */
		transform: scale(1.1);
	}

	.heart-animation {
		width: 100rpx;
		/* 根据你的小心心图片大小调整 */
		height: 100rpx;
		/* 根据你的小心心图片大小调整 */
		margin-top: -200rpx;
		animation: heartBounce 1s ease-in-out forwards;
		/* 添加动画效果 */

	}

	@keyframes heartBounce {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.2);
			opacity: 0.8;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>